<style>
    .category-block,
    .products,
    .prod {
        border: 1px solid #CCCCCC;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }
    .category-block {
        width: 314px;
        float: left;
        text-align: center;
        padding: 20px 0px 10px 0px;
        margin: 5px;
    }
    .view-prod {
        width: 100%;
        background: #EDEDED;
        padding: 10px 0px;
        cursor: pointer;
        margin-top: 10px;
    }
    .view-prod:hover {
        background: -moz-linear-gradient(top, #EDEDED, #FFF); 
        background: -webkit-gradient(linear, left top, left bottom, 
            color-stop(0%,#EDEDED), color-stop(100%,#FFF));
        background: -webkit-linear-gradient(top, #EDEDED, #FFF);
        background: -o-linear-gradient(top, #EDEDED, #FFF); 
        background: -ms-linear-gradient(top, #EDEDED, #FFF); 
        background: linear-gradient(top, #EDEDED, #FFF);
    }
    .products {
        width: 980px;
        background: #FFF;
        margin: 50px auto;
        padding: 20px;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
        border-radius: 20px;
        border: 4px solid #ededed;
        display: none;
        overflow: hidden;
    }
    .products .order-block {
        width: 200px;
        display: inline-block;
        margin: 10px 20px;
        float: left;
    }

    .products-block {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background: url(images/bg.png) repeat;
        overflow: auto;
        display: none;
    }
    .products input[type=checkbox] {
        position: absolute;
        margin-left: -42px;
        margin-top: 6px;
        cursor: pointer;
    }
    #close-products {
        font-size: 30px;
        font-weight: bold;
        color: #FFF;
        background: #63c2ec;
        cursor: pointer;
        -moz-border-radius: 26px;
        -webkit-border-radius: 26px;
        -ms-border-radius: 26px;
        -o-border-radius: 26px;
        position: absolute;
        margin-left: 978px;
        margin-top: -40px;
        padding: 0px 10px
    }
</style>

<script>
    $(document).ready(function() {
//        var viewProdBtn = $(".view-prod");
        var viewProdBtn = $(".view-prod-btn");
        var flyProdBlock = $(".products-block");
        var flyProdBlockComp = $(".products-block .products");

        viewProdBtn.each(function() {
            $(this).css({
                "font-size": "12px",
                "-moz-border-radius": "15px",
                "-webkit-border-radius": "15px",
                "-ms-border-radius": "15px",
                "-o-border-radius": "15px",
                "border-radius": "15px",
            });
            $(this).click(function() {
                flyProdBlock.show();
                flyProdBlockComp.fadeIn(200);
//                cleanBtn();
//                var pos = $(this).offset();
//                $(".products").offset({top: pos.top + 47}).show();
//                $(this).css("background", "-moz-linear-gradient(top, #EDEDED, #FFF)");
//                $(this).css("background", "-webkit-gradient(linear, left top, left bottom,color-stop(0%,#EDEDED), color-stop(100%,#FFF))");
//                $(this).css("background", "-webkit-linear-gradient(top, #EDEDED, #FFF)");
//                $(this).css("background", "-o-linear-gradient(top, #EDEDED, #FFF)");
//                $(this).css("background", "-ms-linear-gradient(top, #EDEDED, #FFF)");
//                $(this).css("background", "linear-gradient(top, #EDEDED, #FFF)");
//                $(this).css("z-index", "100");
//                $(this).parent(".category-block").css({
//                    "border-bottom":"none"
//                });
            });
        });

        $("#close-products").click(function() {
            flyProdBlock.hide();
            flyProdBlockComp.fadeOut(0);
        });
//        function cleanBtn() {
//            $(".view-prod").each(function() {
//                $(this).css("background", "#EDEDED");
//            });
//        }



    });
</script>
<script type="text/javascript" src="js/order.js"></script>

<div style="display: inline-block">
    <%
        for (int i = 0; i < 20; i++) {
    %>
    <div class="category-block">
        <h2>Category name</h2>
        <br/>
        <input class="view-prod-btn" type="button" value="view products >" />
    </div>
    <% }%>
</div>

<div class="products-block">
    <div class="products">
        <div id="close-products">
            x
        </div>
        <%
            for (int j = 0; j < 10; j++) {
        %>
        <div class="order-block">
            <input class="radio-int" type="checkbox" name="internet" value="0">
            <h4>High Speed 10</h4>
            <div class="price">$ 29
                <span class="cent">50<br/>/month</span>
            </div>
            <input class="view-det-btn" type="button" value="view detail >" />

        </div>
        <% }%>
    </div>
</div>

<!--Start--Block show detail information about product-->
<div id="fly-block">
    <div id="product-block">
        <div id="close">
            x
        </div>
        <div>
            <div><h1>Premier TV</h1></div>
            <div class="fly-price-block">
                <span id="price-month" class="price">$ 500
                    <span class="cent">10<br/>/month</span>
                </span>
                <span id="price-activate" class="price">$ 200
                    <span class="cent">50<br/>/activate</span>
                </span>
            </div>
        </div>
        <br/>

        <h4 class="block-header">Settings</h4>
        <div class="table-view" style="padding: 10px 20px 10px 0px;">
            <%
                for (int i = 0; i < 5; i++) {
            %>
            <div>Necessary setting <%= i%>:</div> 
            <div>Value</div>
            <% }%>

            <%
                for (int i = 0; i < 5; i++) {
            %>
            <div>Setting <%= i%>:</div> 
            <div><input type="text"  maxlength="40" value="Default value"/></div>
                <% }%>

        </div>

        <h4 class="block-header">Components</h4>
        <span style="font-size: 15px; font-weight: bold;">Basic: </span>
        Some basics components...
        <h4>Components groups:</h4>
        <div style="padding: 10px 10px 10px 34px;">
            <%
                for (int i = 0; i < 5; i++) {
            %>
            <!--Value - List of ID(or) names components what input in this component group.--> 
            <input class="component-group" type="checkbox" value="comp_2;comp_3;comp_4">Component group (included components)<br/>
            <!--<div>$42,3</div>-->
            <% }%>
        </div>
        <h4>Optional:</h4>
        <div id="components" class="table-view" style="padding: 10px 20px 10px 0px;">

            <%
                for (int i = 0; i < 5; i++) {
            %>
            <div>
                <input id="comp_<%= i%>" type="checkbox" value="Component <%= i%>">
                Component <%= i%>
            </div> 
            <!--Price per month (/m.o) or activate (/act.)-->
            <div>$12,3 /m.o</div>
            <% }%>
        </div>
        <div style="width: 100%; text-align: center;">
            <input id="save-btn" type="button" value="Select product and save parameters"/>
        </div>


    </div>
</div>
<!--Stop--Block show detail information about product-->